<template>
  <div class="layout-design-color flex items-start flex-wrap">
    <span class="inline-flex layout-design-color-item items-center justify-center cursor-pointer"
          v-for="color in options"
          :key="color"
          @click="toggle(color)"
          :style="{
      backgroundColor: color
    }">
      <ZIcon icon="el-icon-arrow-down"
             :color="activeColor"
             v-if="currentValue === color" />
    </span>
      <el-color-picker  v-model="moreColor" @active-change="getColor"></el-color-picker>

  </div>

</template>

<script>
import ZIcon from '@/components/storybook/z-icon'
// import zColorPicker from '@/components/storybook/z-color-picker'

export default {
  name: 'LayoutDesignColor',
  components: {
    ZIcon
    // zColorPicker
  },
  props: {
    options: {
      type: Array,
      default: () => ([])
    },
    activeColor: {
      type: String,
      default: '#FFFFFF'
    },
    value: true

  },
  data () {
    return {
      moreColor: ''
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    toggle (color) {
      this.currentValue = color
    },
    getColor (val) {
      this.currentValue = val
    }
  }
}
</script>
<style lang="scss" scoped>
.layout-design-color {
  &-item {
    width: 38px;
    height: 38px;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 5px;
    &:not(&:last-of-type) {
      margin-right: 6px;
    }
  }
  .el-color-picker ::v-deep .el-color-picker__trigger {
     height: 38px;
     width: 38px;
    padding: 0px;
    margin-left: 6px;
    margin-bottom: 5px;
    .icon_color:before {
    // content: "\E741";
    // font-size: 25px;
}
    .el-color-picker__color {
        border-radius: 4px;
    }
    .el-icon-arrow-down:before {
    font-size: 16px;
    }

  }

}
::v-deep .el-color-picker__empty.el-icon-close:before {
  content: '\e76a';
  font-size: 22px;
}
</style>
